<template>
  <div class="main">
    <el-row :span="24" class="outer-row">
      <div class="main-in">
        <el-row :span="12">
          <div class="top">
            <el-carousel indicator-position="outside" height="350px" class="car">
              <el-carousel-item v-for="image in images" :key="image.id" :fit="contain" class="carit">
                <el-image style="width: 100%; height: 100%" class="image" :src="image.url"></el-image>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-row>

        <el-row :span="12" class="c1">
          <el-col :span="12" class="c2">
            <div class="cardout">
              <el-card class="ca">
                <h3>有关于疗养院的近期状态与行程</h3>
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column prop="date" label="日期" width="180" />
                  <el-table-column prop="name" label="事件" width="180" />
                  <el-table-column prop="address" label="描述" width="180" />
                </el-table>
              </el-card>
            </div>
          </el-col>
          <el-col :span="12" class="c3">
            <div class="cardout">
              <el-card class="ca">
                <h3>公告</h3>
                <el-table :data="tableData2" style="width: 100%">
                  <el-table-column prop="date" label="日期" width="180" />
                  <el-table-column prop="name" label="事件" width="180" />
                  <el-table-column prop="address" label="描述" width="180" />
                </el-table>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-row>
  </div>
</template>
<script setup>
const tableData2 = [
  {
    date: '2018-10-03',
    name: '今日菜单',
    address: '一日三餐详情',
  },
  {
    date: '2018-10-02',
    name: '今日菜单',
    address: '一日三餐详情',
  },
  {
    date: '2018-10-04',
    name: '今日菜单',
    address: '一日三餐详情',
  },
]
const tableData = [
  {
    date: '2018-09-09',
    name: '重阳节福利',
    address: '重阳节福利发放',
  },
  {
    date: '2018-09-09',
    name: '重阳节福利',
    address: '重阳节福利发放',
  },
  {
    date: '2018-09-09',
    name: '重阳节福利',
    address: '重阳节福利发放',
  },
]
const images = [
  {
    id: 1,
    url: "src/assets/loginPic.jpg",
  },
  {
    id: 2,
    url: "https://ts1.cn.mm.bing.net/th/id/R-C.81d46331789fb08f77a628ab080928e8?rik=k3EaRZLf4TRG3A&riu=http%3a%2f%2flabang-img.oss-cn-shenzhen.aliyuncs.com%2fuploads%2f20220615%2faf6d075dacc4c8b5d1cfc9fb9c461778.jpg!details&ehk=dOE9t33FsOzJ0NME5eryHm6sZAkzXOdY7HVKGuPG6q4%3d&risl=&pid=ImgRaw&r=0",
  },
  {
    id: 3,
    url: "https://ts1.cn.mm.bing.net/th/id/R-C.1a106350f3d042ad458ef7e7c9d16b24?rik=10ocKJYG2yOGPA&riu=http%3a%2f%2fwww.ycwsyl.cn%2frepository%2fimage%2fNK1U1HYXSKKRZottDYvDgA.jpg&ehk=scLbptbbObIJlw7Gnftqnm9B3o1THAqlALuMlAY5CS8%3d&risl=&pid=ImgRaw&r=0",
  } /**/,
];
</script>
<style scoped>
.main {
  width: 100%;
  height: 100%;

  .outer-row {
    width: 100%;
    height: 100%;

    .main-in {
      width: 100%;
      height: 100%;
    }

    .top {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .car {
        width: 93%;
        height: 100%;
      }

      .image {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .el-carousel__item h3 {
        color: #475669;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
        text-align: center;
      }

      .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
      }

      .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
      }
    }

    .c1 {
      width: 100%;
      height: 40%;
    }

    .c2 {
      width: 100%;
      height: 100%;
    }

    .c3 {
      width: 100%;
      height: 100%;
    }

    .car {
      width: 100%;
      height: 100%;
    }

    .cardout {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .ca {
        width: 100%;
        height: 100%;
        margin: 50px;
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>
